<template>
	<view class="apps">
		<view class="banner">
			<image :src="info.image_url" style="width: 100%;height: auto;" mode="widthFix"></image>
		</view>
		<view class="info">
			<view class="title">{{info.title}}</view>
			<view class="time">
				<uv-icon name="clock-fill" size="18"></uv-icon>
				<view style="margin-left: 10rpx;">{{info.start_time}} 至 {{info.end_time}}</view>
			</view>
			<view class="time">
				<uv-icon name="map-fill" size="20" ></uv-icon>
				<view style="margin-left: 10rpx;display: flex; overflow: hidden;text-overflow: ellipsis;
		display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{info.city_text}}{{info.address}}</view>
			</view>
			<view class="time" v-if="info.nums>0">
				<uv-icon name="account-fill" size="21"></uv-icon>
				<view style="margin-left: 10rpx;">已报名人数: {{info.nums}}</view>
			</view>
		</view>
		<view class="content">
			<uv-parse :content="info.content" :tagStyle="style"></uv-parse>
		</view>
		<uv-popup ref="popup" :close-on-click-overlay="false" customStyle="border-radius:15rpx; min-height:200rpx;">
			<view style="width: 600rpx; min-height: 200rpx; background-color: #fff; padding:20rpx;">
				<view style="text-align: center; padding: 10rpx; font-size: 14px;">我要报名</view>
				<uv-form :model="form" :rules="rules" ref="form">
					<uv-form-item label="姓名" prop="name">
						<uv-input v-model="form.name" placeholder="请输入姓名" />
					</uv-form-item>
					<uv-form-item label="电话" prop="mobile">
						<uv-input v-model="form.mobile" placeholder="请输入电话" />
					</uv-form-item>
					<uv-form-item label="公司" prop="company">
						<uv-input v-model="form.company" placeholder="请输入公司" />
					</uv-form-item>
					<uv-form-item label="职务" prop="job">
						<uv-input v-model="form.job" placeholder="请输入职务" />
					</uv-form-item>	
					</uv-form>
					<view style="padding:10rpx;"><uv-button type="primary" @click="submit">提交</uv-button></view>
					<view style="padding:10rpx;"><uv-button type="error" @click="close">取消</uv-button></view>
			</view>
		</uv-popup>
		<uv-tabbar value="4">
			<view class="tabitem blue2" @click="handle('/pages/qrcode/qrcode?id='+info.id)">
				分享朋友
			</view>
			<view class="tabitem blue" v-if="info.process > 0" @click="baoming()">
				我要报名
			</view>
			<view class="tabitem red" v-else>
				已结束
			</view>
		</uv-tabbar>
	</view>
</template>

<script>
	let app;
	import * as ww from '@wecom/jssdk'
	export default {
		data() {
			return {
				id:0,
				info:{
					title:'',
					conetnt:'',
					images:[],
				},
				style:{
					p:"font-size:15px;",
					img:"max-width:100%"
				},
				form:{
					name:'',
					mobile:'',
					company:'',
					job:'',
				},
				rules: {
					name:{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					mobile: [{
						required: true,
						message: '请填写手机号',
						// blur和change事件触发检验
						trigger: ['blur', 'change']
					}, {
						
						pattern:/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/,
						message: '手机号码错误',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(opt){
			
			app = this;
			app.id = opt.id;
			ww.register({
				corpId: 'ww5d7b19c3c1ce8e1f',    // 必填，当前用户企业所属企业ID
				jsApiList: ['hideMenuItems','createWWLoginPanel',''],  
				agentId:'1000007',
				getConfigSignature: async function(){
				  const configData = await app.request({
						url: '/auth',
						data:{'agent_id':''}
					})
					//app.alert(JSON.stringify(configData));
					return configData.data;
				},                
				getAgentConfigSignature: async function(){
					const AgentConf = await app.request({
						url: '/auth',
						data:{'agent_id':'1000008'}
					})
					//app.alert(JSON.stringify(AgentConf));
					return AgentConf.data;
				}
			})
			ww.hideAllNonBaseMenuItem();
			ww.hideOptionMenu();
			app.getDetail()
		},
		methods: {
			getDetail(){
				app.request({
					url:"/detail",
					data:{id:app.id},
					success:function(rlt){
						app.info = rlt.data;
					}
				})
			},
			submit(){
				this.$refs.form
				.validate()
				.then(res => {
					
						app.request({
							url:"/submit",
							data:{activity_id:app.id,name:app.form.name,mobile:app.form.mobile,company:app.form.company,job:app.form.job},
							success:function(rlt){
								if(rlt.code == 1){
									app.form = {
										name:'',
										mobile:'',
										company:'',
										job:'',
									}
									
									app.getDetail();
									app.close();
									app.reset();
									app.util.alert('报名成功');
								}
							},
						})
					}).catch(errors => {
						console.log(errors);
					})
				},
			// 重置
			reset() {
				this.$refs.form.resetFields();
				this.$refs.form.clearValidate();
			},
			baoming(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			},
			handle(e){
				uni.navigateTo({
					url:e
				})
			}
		}
	}
</script>

<style scoped>
	.banner{width:100%;height: 450rpx;overflow: hidden;}
	.info {margin:10rpx 20rpx; padding:15rpx;background-color: #f9f9f9; display: flex; flex-direction: column; border-radius: 5rpx;}
	.info .title{font-size: 32rpx; display: flex; overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 控制行数 */
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;}
	.info .time{font-size: 28rpx; display: flex; align-items: center;margin-top: 15rpx;}
	.content{padding:20rpx;margin-bottom: 20px;}
	.company{padding:30rpx; border-radius: 20rpx; border:1px dashed #f9f9f9; }
	.tabitem{display: flex; flex:1;align-items: center; justify-content: center; font-size: 28rpx;color:#fff;font-weight: 400;}
	.blue{background-color:#4f83fe}
	.blue2{background-color: #5cc3f6;}
	.red{background-color: #ec4a2f;}
</style>
